<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="报警区域分布"
    />
    <div class="search">
      <el-select  v-model="searchForm.modeType"  placeholder="请选择" @change="changeModeType" style="width: 120px;margin-right: 10px">
        <el-option
          v-for="item in alarmTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        class="search-li"
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        prop="areaName"
        label="地市">
      </el-table-column>
      <el-table-column
        prop="allCount"
        label="报警总数">
      </el-table-column>
      <el-table-column
        prop="completeCount"
        label="已处置报警">
      </el-table-column>
      <el-table-column
        prop="unCompleteCount"
        label="未处置报警">
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import VTable from "@/components/VTable/index";
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { time_select_optios } from '@/utils/global.js';
  import { alarmHandingAmount } from '@/api/alarm/statistics'
  export default {
    name: "alarmAmount",
    components: {
      VTable,
      formTitleVue,
    },
    props: {
      alarmTypeOptions: {
        type: Array,
        default: [],
      },
    },
    data() {
      return {
        tableData: [],
        loading: false,
        searchForm: {
          time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
          startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD")+" 00:00:00",
          endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD")+" 23:59:59",
          areaCode:'',
          placeType:'',
          modeType:""
        },
      };
    },
    methods: {
      changeModeType(item){
        console.log("modeTYpe，",item)
        this.searchForm.modeType = item
        this.getData()
      },
      changeMonth(item){
        this.searchForm.startTime = this.$dayjs(item).startOf("month").format("YYYY-MM-DD")+" 00:00:00"
        this.searchForm.endTime = this.$dayjs(item).endOf("month").format("YYYY-MM-DD")+" 23:59:59"
        this.getData()
      },
      getData() {
        this.loading = true;
        this.searchForm.areaCode = this.$store.state.account.user.deptIds;
        this.searchForm.placeType = this.$commonJs.getPlaceType(this.searchForm.areaCode);
        alarmHandingAmount(this.searchForm).then((res) => {
          this.tableData=res.data
          this.loading = false
        });

      },
    },
    mounted() {
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
  .alarmAmount-root {
    position: relative;
    .search{
      position: absolute;
      top: 0px;
      right: 0px;
      .search-li{
        width: 120px;
      }
    }
  }
</style>
